<template>
  <el-dialog :title="title" width="800px" append-to-body :visible.sync="dialogedit" @open="openDialog"
    :before-close="closeDialog" :close-on-click-modal="false" v-dialogDrag>
    <div class="form-box flex-column">
      <el-form ref="formdata" :model="ruleform" :rules="rules" label-suffix="：" :validate-on-rule-change="false"
        :show-message="false" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告标题" prop="notice_title"><el-input
                v-model="ruleform.notice_title"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告类型" prop="notice_type">
              <el-select v-model="ruleform.notice_type" placeholder="请选择公告类型">
                <el-option v-for="dict in dict.type.sys_notice_type" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio v-model="ruleform.status" v-for="dict in dict.type.sys_notice_status" :key="dict.value"
                :label="dict.value">{{dict.label}}</el-radio>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <div style="flex: 1;position:relative;">
        <div style="position:absolute;top:0;right:0;bottom:0;left:0;">
          <WangEditor ref="editor" />
        </div>

      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save_validate()">保 存</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    SaveNotice,
    getNotice
  } from "@/api/system/notice";
  export default {
    name: 'post_edit',
    dicts: ['sys_notice_status', 'sys_notice_type'],
    props: {
      dialogedit: {
        type: Boolean,
        default: false
      },
      notice_id: {
        type: String,
        default: 0
      }
    },
    data() {
      return {
        title: '修改通知通告',
        ruleform: {
          notice_id: 0,
          notice_title: '',
          notice_type: '',
          notice_content: '',
          status: '0',
          remark: ''
        },
        notice_content: '',
        rules: {
          notice_title: [{
            required: true,
            message: '公告标题不能为空'
          }],
          notice_type: [{
            required: true,
            message: '公告类型不能为空'
          }],
          status: [{
            required: true,
            message: '状态不能为空'
          }]
        }
      };
    },
    created() {},
    methods: {
      closeDialog() {
        this.$nextTick(() => {
          this.$refs.formdata.resetFields();
          this.$refs.editor.ClearEditorHtml();
          this.$emit('update:dialogedit', !this.dialogedit);
        });
      },
      save_validate() {

        this.$refs.formdata.validate((valid, valids) => {
          if (valid) {
            this.save_notice();
          } else {
            var msg = '';
            for (var key in valids) {
              var item = valids[key];
              msg = item[0].message;
              break;
            }
            if (msg) this.$message.error(msg);

            return false;
          }
        });
      },

      async save_notice() {
        const loading = this.loading('保存中...');
        this.ruleform.notice_content = this.$refs.editor.getEditorHtml();
        SaveNotice(this.ruleform).then(response => {
          this.$modal.msgSuccess("保存成功");
          loading.close();
          this.closeDialog();
          this.$emit('reload');
        }).catch(err => {
          loading.close();
        });
      },
      async openDialog() {
        this.notice_content = "";
        if (this.notice_id == 0) {
          this.title = "新增通知公告";
          this.ruleform = {
            notice_id: 0,
            notice_title: '',
            notice_type: '',
            notice_content: '',
            status: '0',
            remark: ''
          }
        } else {
          this.title = "修改通知公告";
          const parmas = {
            notice_id: this.notice_id
          }
          getNotice(parmas).then(res => {
            if (res.code == 200) {
              this.ruleform = {
                notice_id: this.notice_id,
                notice_title: res.data.notice_title,
                notice_type: res.data.notice_type,
                notice_content: res.data.notice_content,
                status: res.data.status,
                remark: res.data.remark
              }
              this.notice_content = res.data.notice_content;
              this.$nextTick(() => {
                this.$refs.editor.setEditorHtml(this.ruleform.notice_content)
              });
            } else {
              this.ruleform = {
                notice_id: 0,
                notice_title: '',
                notice_type: '',
                notice_content: '',
                status: '0',
                remark: ''
              }
            }
            this.notice_content = "";
            this.$nextTick(() => {
              this.$refs.editor.setEditorHtml(this.notice_content)

            });

          }).catch(err => {

          });


        }
      }
    }
  };
</script>

<style scoped>
  .form-box {
    min-height: 600px;
    padding-right: 10px;
    overflow: auto;
  }
</style>
